<template>
  <div>
    <v-chart :options="line"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/line'

  export default {
    props: {
      list: [["2014-01-01", 85], ["2014-01-02", 158], ["2014-01-03", 74], ["2014-01-04", 165], ["2014-01-05", 113], ["2014-01-06", 190], ["2014-01-07", 122], ["2014-01-10", 95], ["2014-01-11", 159], ["2014-01-12", 52], ["2014-01-13", 117], ["2014-01-14", 113], ["2014-01-15", 180], ["2014-01-16", 403], ["2014-01-17", 209], ["2014-01-18", 113], ["2014-01-19", 149], ["2014-01-21", 68], ["2014-01-22", 162], ["2014-01-23", 276], ["2014-01-24", 195], ["2014-01-26", 77], ["2014-01-27", 114], ["2014-01-28", 67], ["2014-01-29", 165], ["2014-01-30", 93], ["2014-01-31", 188], ["2014-02-01", 178], ["2014-02-02", 85], ["2014-02-05", 119], ["2014-02-06", 158], ["2014-02-07", 124], ["2014-02-08", 84], ["2014-02-10", 53], ["2014-02-11", 142], ["2014-02-12", 150], ["2014-02-13", 242], ["2014-02-14", 329], ["2014-02-15", 429], ["2014-02-16", 348], ["2014-02-17", 118], ["2014-02-18", 98], ["2014-02-19", 92], ["2014-02-20", 270], ["2014-02-21", 311], ["2014-02-22", 311], ["2014-02-23", 255], ["2014-02-24", 313], ["2014-02-25", 404], ["2014-02-28", 113], ["2014-03-01", 68], ["2014-03-02", 189], ["2014-03-03", 268], ["2014-03-04", 67], ["2014-03-07", 70], ["2014-03-08", 179], ["2014-03-09", 127], ["2014-03-10", 110], ["2014-03-11", 195], ["2014-03-13", 69], ["2014-03-14", 64], ["2014-03-15", 133], ["2014-03-16", 145], ["2014-03-17", 142], ["2014-03-18", 85], ["2014-03-19", 73], ["2014-03-21", 62], ["2014-03-22", 86], ["2014-03-23", 186], ["2014-03-24", 271], ["2014-03-25", 255], ["2014-03-26", 331], ["2014-03-27", 285], ["2014-03-28", 169], ["2014-03-29", 63], ["2014-03-30", 77], ["2014-03-31", 183], ["2014-04-01", 147], ["2014-04-02", 133], ["2014-04-03", 66], ["2014-04-04", 91], ["2014-04-05", 68], ["2014-04-06", 98], ["2014-04-07", 135], ["2014-04-08", 223], ["2014-04-09", 156], ["2014-04-10", 246], ["2014-04-11", 83], ["2014-04-12", 133], ["2014-04-13", 212], ["2014-04-14", 270], ["2014-04-15", 109], ["2014-04-16", 90], ["2014-04-17", 124], ["2014-04-18", 182], ["2014-04-19", 84], ["2014-04-20", 84], ["2014-04-21", 73], ["2014-04-22", 85], ["2014-04-23", 156], ["2014-04-24", 156], ["2014-04-25", 163], ["2014-04-26", 69], ["2014-04-27", 74], ["2014-04-28", 83], ["2014-04-29", 122], ["2014-04-30", 139], ["2014-05-01", 156], ["2014-05-03", 93], ["2014-05-04", 57], ["2014-05-05", 54], ["2014-05-06", 105], ["2014-05-07", 82], ["2014-05-08", 104], ["2014-05-09", 84], ["2014-05-10", 69], ["2014-05-12", 74], ["2014-05-13", 86], ["2014-05-14", 59], ["2014-05-15", 122], ["2014-05-16", 92], ["2014-05-17", 124], ["2014-05-18", 171], ["2014-05-19", 146], ["2014-05-20", 113], ["2014-05-21", 170], ["2014-05-22", 183], ["2014-05-23", 140], ["2014-05-24", 104], ["2014-05-25", 91], ["2014-05-26", 77], ["2014-05-27", 107], ["2014-05-28", 121], ["2014-05-29", 120], ["2014-05-30", 192], ["2014-05-31", 177], ["2014-06-01", 130], ["2014-06-02", 90], ["2014-06-03", 117], ["2014-06-04", 124], ["2014-06-05", 157], ["2014-06-06", 103], ["2014-06-07", 51], ["2014-06-08", 70], ["2014-06-09", 87], ["2014-06-10", 95], ["2014-06-11", 74], ["2014-06-12", 90], ["2014-06-13", 116], ["2014-06-14", 165], ["2014-06-15", 178], ["2014-06-16", 178], ["2014-06-17", 104], ["2014-06-18", 116], ["2014-06-19", 116], ["2014-06-20", 84], ["2014-06-21", 96], ["2014-06-22", 91], ["2014-06-23", 115], ["2014-06-24", 161], ["2014-06-25", 138], ["2014-06-26", 163], ["2014-06-27", 68], ["2014-06-28", 77], ["2014-06-29", 161], ["2014-06-30", 185], ["2014-07-01", 172], ["2014-07-02", 80], ["2014-07-03", 248], ["2014-07-04", 237], ["2014-07-05", 165], ["2014-07-06", 256], ["2014-07-07", 216], ["2014-07-08", 134], ["2014-07-09", 63], ["2014-07-10", 114], ["2014-07-11", 77], ["2014-07-12", 80], ["2014-07-13", 64], ["2014-07-14", 156], ["2014-07-15", 140], ["2014-07-16", 133], ["2014-07-17", 186], ["2014-07-18", 182], ["2014-07-19", 106], ["2014-07-20", 119], ["2014-07-21", 68], ["2014-07-22", 54], ["2014-07-23", 82], ["2014-07-24", 90], ["2014-07-25", 134], ["2014-07-26", 188], ["2014-07-27", 194], ["2014-07-28", 159], ["2014-07-29", 159], ["2014-07-30", 169], ["2014-07-31", 244], ["2014-08-01", 199], ["2014-08-02", 163], ["2014-08-03", 149], ["2014-08-05", 80], ["2014-08-06", 67], ["2014-08-07", 162], ["2014-08-08", 140], ["2014-08-09", 143], ["2014-08-10", 125], ["2014-08-11", 76], ["2014-08-12", 119], ["2014-08-13", 70], ["2014-08-14", 104], ["2014-08-15", 109], ["2014-08-16", 159], ["2014-08-17", 124], ["2014-08-18", 135], ["2014-08-19", 150], ["2014-08-20", 164], ["2014-08-21", 169], ["2014-08-22", 83], ["2014-08-23", 155], ["2014-08-24", 75], ["2014-08-25", 59], ["2014-08-26", 78], ["2014-08-27", 136], ["2014-08-28", 103], ["2014-08-29", 104], ["2014-08-30", 176], ["2014-08-31", 89], ["2014-09-01", 127], ["2014-09-03", 54], ["2014-09-04", 100], ["2014-09-05", 140], ["2014-09-06", 186], ["2014-09-07", 200], ["2014-09-08", 61], ["2014-09-09", 109], ["2014-09-10", 111], ["2014-09-11", 114], ["2014-09-12", 97], ["2014-09-13", 94], ["2014-09-14", 66], ["2014-09-15", 54], ["2014-09-16", 87], ["2014-09-17", 80], ["2014-09-18", 84], ["2014-09-19", 117], ["2014-09-20", 168], ["2014-09-21", 129], ["2014-09-22", 127], ["2014-09-23", 64], ["2014-09-24", 60], ["2014-09-25", 144], ["2014-09-26", 170], ["2014-09-27", 58], ["2014-09-28", 87], ["2014-09-29", 70], ["2014-09-30", 53], ["2014-10-01", 92], ["2014-10-02", 78], ["2014-10-03", 123], ["2014-10-04", 95], ["2014-10-05", 54], ["2014-10-06", 68], ["2014-10-07", 200], ["2014-10-08", 314], ["2014-10-09", 379], ["2014-10-10", 346], ["2014-10-11", 233], ["2014-10-14", 80], ["2014-10-15", 73], ["2014-10-16", 76], ["2014-10-17", 132], ["2014-10-18", 211], ["2014-10-19", 289], ["2014-10-20", 250], ["2014-10-21", 82], ["2014-10-22", 99], ["2014-10-23", 163], ["2014-10-24", 267], ["2014-10-25", 353], ["2014-10-26", 78], ["2014-10-27", 72], ["2014-10-28", 88], ["2014-10-29", 140], ["2014-10-30", 206], ["2014-10-31", 204], ["2014-11-01", 65], ["2014-11-03", 59], ["2014-11-04", 150], ["2014-11-05", 79], ["2014-11-07", 63], ["2014-11-08", 93], ["2014-11-09", 80], ["2014-11-10", 95], ["2014-11-11", 59], ["2014-11-13", 65], ["2014-11-14", 77], ["2014-11-15", 143], ["2014-11-16", 98], ["2014-11-17", 64], ["2014-11-18", 93], ["2014-11-19", 282], ["2014-11-23", 155], ["2014-11-24", 94], ["2014-11-25", 196], ["2014-11-26", 293], ["2014-11-27", 83], ["2014-11-28", 114], ["2014-11-29", 276], ["2014-12-01", 54], ["2014-12-02", 65], ["2014-12-03", 51], ["2014-12-05", 62], ["2014-12-06", 89], ["2014-12-07", 65], ["2014-12-08", 82], ["2014-12-09", 276], ["2014-12-10", 153], ["2014-12-11", 52], ["2014-12-13", 69], ["2014-12-14", 113], ["2014-12-15", 82], ["2014-12-17", 99], ["2014-12-19", 53], ["2014-12-22", 103], ["2014-12-23", 100], ["2014-12-25", 73], ["2014-12-26", 155], ["2014-12-27", 243], ["2014-12-28", 155], ["2014-12-29", 125], ["2014-12-30", 65], ["2015-01-01", 65], ["2015-01-02", 79], ["2015-01-03", 200], ["2015-01-04", 226], ["2015-01-05", 122], ["2015-01-06", 60], ["2015-01-07", 85], ["2015-01-08", 190], ["2015-01-09", 105], ["2015-01-10", 208], ["2015-01-11", 59], ["2015-01-12", 160], ["2015-01-13", 211], ["2015-01-14", 265], ["2015-01-15", 386], ["2015-01-16", 118], ["2015-01-17", 89], ["2015-01-18", 94], ["2015-01-19", 77], ["2015-01-20", 113], ["2015-01-22", 143], ["2015-01-23", 257], ["2015-01-24", 117], ["2015-01-25", 185], ["2015-01-26", 119], ["2015-01-28", 65], ["2015-01-29", 87], ["2015-01-31", 60], ["2015-02-01", 108], ["2015-02-02", 188], ["2015-02-03", 143], ["2015-02-05", 62], ["2015-02-06", 100], ["2015-02-09", 152], ["2015-02-10", 166], ["2015-02-11", 55], ["2015-02-12", 59], ["2015-02-13", 175], ["2015-02-14", 293], ["2015-02-15", 326], ["2015-02-16", 153], ["2015-02-18", 73], ["2015-02-19", 267], ["2015-02-20", 183], ["2015-02-21", 394], ["2015-02-22", 158], ["2015-02-23", 86], ["2015-02-24", 207]],
      name: "aaaaa"
    },
    components: {
      'v-chart': ECharts
    },
    data() {
      console.log(this);
      return {
        line: {
          title: {
            text: this.name
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            data: this.list.map(function (item) {
              return item.name;
            })
          },
          yAxis: {
            splitLine: {
              show: false
            }
          },
          toolbox: {
            left: 'center',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          series: [{
            name: 'LINE1',
            type: 'line',
            data: this.list.map(function (item) {
              return item.value;
            }),
            markLine: {
              silent: true,
              data: [{
                yAxis: 50
              }, {
                yAxis: 100
              }, {
                yAxis: 150
              }, {
                yAxis: 200
              }, {
                yAxis: 300
              }]
            }
          }]
        }
      }
    }
  }
</script>
